<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>360星图-安全分析报告</title>
    <!--时间序列CSS-->
    <style type="text/css">
        html, body { -webkit-text-size-adjust: none; background: #f7f7f7; }
        div, form, input, textarea, p, ul, li, dl, dt, dd, h1, table, h2 { padding: 0; margin: 0; }
        li { list-style-type: none; }
        ol, ul { list-style: none; }
        img { vertical-align: top; border: 0; }
        em, i { font-style: normal; }
        a { color: #666; text-decoration: none; }
            a:hover { color: #F60; text-decoration: underline; }
        .clearfix { *zoom: 1; }
            .clearfix:before, .clearfix:after { display: table; content: ""; }
            .clearfix:after { clear: both; }
        ul, li { list-style: none; }
        a { text-decoration: none; }
            a:hover { text-decoration: none; cursor: pointer; }
        .content { width: 100%; overflow: hidden; }
            .content .main { background: url("") repeat-y 120px 0; }
                .content .main .year h2 { padding-left: 10px; font-size: 14px; }
                    .content .main .year h2 a { color: #fff; }
                    .content .main .year h2 i { display: block; position: relative; height: 0; width: 0; left: 60px; top: -13px; border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform-origin: 6px 3px; -moz-transform-origin: 6px 3px; -ms-transform-origin: 6px 3px; -o-transform-origin: 6px 3px; transform-origin: 6px 3px; }
                .content .main .year .list { margin: 10px 0; position: relative; overflow: hidden; -webkit-transition: height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -moz-transition: height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -ms-transition: height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -o-transition: height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; transition: height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; }
                    .content .main .year .list ul { bottom: 0; }
                        .content .main .year .list ul li { background: url("") no-repeat 66px -6px; color: #a1a4b8; }
                            .content .main .year .list ul li.highlight { background-image: url(""); }
        .cls { zoom: 1; }
            .cls:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .content .main .year .list ul li.highlight .date, .content .main .year .list ul li.highlight .intro { color: #999; }
        .content .main .year .list ul li .date, .content .main .year .list ul li .version { float: left; display: block; }
        .content .main .year .list ul li .date { color: #bec1d5; }
        .content .main .year .list ul li .intro, .content .main .year .list ul li .more { float: left; display: block; width: 255px; margin-left: 94px; }
        .content .main .year .list ul li .intro { color: #999; }
        .content .wrapper:first-child .main .year.close h2 i { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }
        .content .wrapper:first-child .main .year.close .list { opacity: 0; height: 0!important; }
        .ie7 .content .main .year h2 i { left: 40px; }
    </style>
    <!--新加入CSS-->
    <style>
        /*头部*/
        #header { margin-left: 80px; color: #52C4FF; font-size: 32px; font-weight: bold; height: 45px; line-height: 45px; }
        .RiZhiShiJian { margin-left: 80px; color: #999; font-size: 15px; height: 25px; }
        /*第一行*/
        #first-row { margin: 10px 0px; height: 232px; overflow: hidden; }
        /*饼图*/
        #BingTu { float: left; padding: 0; width: 395px; height: 250px; border: 1px solid #999999; }
        /*数据概况*/
        #ShuJuGaiKuang { margin: 0; }
            #ShuJuGaiKuang table { height: 250px; text-align: center; }
        /*第二行*/
        #second-row { margin: 10px 0px; height: 232px; overflow: hidden; }
        /*雷达图*/
        #LeiDaTu { float: left; padding: 0; width: 395px; height: 250px; border: 1px solid #999999; }
        /*攻击线图*/
        #GongJiXianTu { margin: 0; padding: 0; height: 250px; border: 1px solid #999999; }
        /*第三行*/
        #third-row { margin: 10px 0px; overflow: hidden; }
        /*攻击IP*/
        #GongJiIP { width: 395px; }
        #GongJiIP td{
        	padding-left: 155px;
        }
        /*恶意IP*/
        #EYiIP { margin-bottom: 20px; padding: 0; }
        #EYiIP1 { margin-bottom: 20px; padding: 0; }
        #EYiIP2 { margin-bottom: 10px; padding: 0; }
        /*攻击类型*/
        #GongJiLeiXing { float: left; padding: 0; }
            #GongJiLeiXing table { text-align: center; }
        /*时间序列*/
        #ShiJianXuLie { padding-top: 25px; width: 395px; overflow: hidden; }
        #ShiJianXuLie-list { border: 1px solid #999999; }
        /*高危列表*/
        #GaoWeiLieBiao {padding-top: 25px;}
    </style>

    <!--原版CSS-->
    <style>
        html { font-size: 100%; font-family: "微软雅黑","Microsoft Yahei",tahoma,arial; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
        body { font-family: "微软雅黑","Microsoft Yahei",tahoma,arial; font-size: 80%; color: #999999; margin: 0; background-color: #333333; }
        a:focus { outline: thin dotted; }
        a:active, a:hover { outline: 0; }
        p { margin: 0 0 1em 0; }
        ul { padding: 0 0 0 40px; }
        table { border-collapse: collapse; border-spacing: 0; }
        h1 { color: #52c4ff; }
        h2 { font-weight: 700; color: #52c4ff; font-size: 1.2em; }
        .agent-hide, .hide { display: none; }
        .r, .s { cursor: pointer; }
        .r { float: right; }
        thead th { text-align: center; }
        .max { color: #ffea00; font-weight: 700; }
        .hight { color: #ff7e0e;}
        #layout { padding-left: 200px; left: 0; }
        .l-box { padding: 1.3em 0 0 6em; }
        .graph { height: 1.529411765em; margin-bottom: .470588235em; overflow: hidden; background-color: #3d3d3d; border-radius: .071428571em; text-align: center; }
            .graph .bar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background-color: #ff7e0e; box-sizing: border-box; color: #fff; float: left; height: 100%; }
            .graph .light { background-color: #BBB; }
        #menu { -webkit-overflow-scroll: touch; -webkit-transition: left 0.75s, -webkit-transform 0.75s; background: #2f2f2f; border-right: 1px #ddd; bottom: 0; left: 200px; margin-left: -200px; outline: 1px solid #1e1f20; overflow-y: auto; position: fixed; top: 0; transition: left 0.75s, -webkit-transform 0.75s, transform 0.75s; width: 200px; z-index: 1000; }
            #menu a { border: 0; border-bottom: 1px solid #111; box-shadow: 0 1px 0 #383838; color: #ccc; font-weight: normal; padding: .6em 0 .6em .6em; white-space: normal; font-size: 1.1em; }
            #menu p { color: #eee; padding: .6em; font-size: 85%; }
            #menu .pure-menu-open { background: transparent; border: 0; }
            #menu .pure-menu ul { border: 0; background: transparent; }
            #menu .pure-menu li a:hover, #menu .pure-menu li a:focus { background: #333; }
            #menu .pure-menu-heading:hover, #menu .pure-menu-heading:focus { color: #333; }
            #menu .pure-menu-heading { color: black; font-size: 120%; font-weight: bold; }
        .pure-u { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
        .pure-u-1 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
        .pure-u-1 { width: 100%; }
        .pure-g-r { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; }
        .pure-g-r { word-spacing: -.43em; }
            .pure-g-r [class*=pure-u] { }

        @media ( max-width :480px) {
            .pure-g-r > .pure-u, .pure-g-r > [class*=pure-u-] { width: 100%; }
        }

        @media ( max-width :767px) {
            .pure-g-r > .pure-u, .pure-g-r > [class*=pure-u-] { width: 100%; }
        }

        .pure-menu ul { position: absolute; visibility: hidden; }
        .pure-menu.pure-menu-open { visibility: visible; z-index: 2; width: 100%; }
        .pure-menu ul { left: -10000px; list-style: none; margin: 0; padding: 0; top: -10000px; z-index: 1; }
        .pure-menu > ul { position: relative; }
        .pure-menu-open > ul { left: 0; top: 0; visibility: visible; }
            .pure-menu-open > ul:focus { outline: 0; }
        .pure-menu li { position: relative; }
        .pure-menu a, .pure-menu .pure-menu-heading { display: block; color: inherit; line-height: 1.5em; padding: 5px 20px; text-decoration: none; white-space: nowrap; }
        .pure-menu li a { padding: 5px 20px; }
        .pure-menu.pure-menu-open { background: #fff; border: 1px solid #b7b7b7; }
        .pure-menu a { border: 1px solid transparent; border-left: 0; border-right: 0; }
        .pure-menu a { color: #4B4B4B; }
        .pure-menu li a:hover, .pure-menu li a:focus { background: #eee; }
        .pure-menu .pure-menu-heading { color: #565d64; font-size: 90%; margin-top: .5em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #dfdfdf; }
        .pure-table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #999; width: 100%; margin-bottom: 20px}
            .pure-table td, .pure-table th { border-left: 1px solid #999; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: 6px 12px; }
                .pure-table td:first-child, .pure-table th:first-child { border-left-width: 0; }
                .pure-table td:last-child { white-space: normal; width: auto; word-break: break-all; word-wrap: break-word; }
            .pure-table thead { background: #3d3d3d; color: #FFF; text-align: left; text-shadow: 0px -1px 0px #000; vertical-align: bottom; }
            .pure-table td { background-color: transparent; }
            .pure-table tbody tr:hover, .pure-table-striped tr:nth-child(2n-1) td { background-color: #3e7699; color: #fff; }

        /**** 两列布局****/
        .bulid-row { padding: 16px 20px 20px 80px; }
        .left-box { float: left; height: 100%; }
        .right-box { height: 100%; margin-left: 420px; }

        @media ( max-width : 974px) {
            #layout { position: relative; padding-left: 0; }
                #layout.active { position: relative; left: 200px; }
                    #layout.active #menu { left: 200px; width: 200px; }
            #menu { left: 0; }
            .pure-menu-link { position: fixed; left: 0; display: block; }
            #layout.active .pure-menu-link { left: 200px; }
        }

        body { min-width: 1200px; }
        #ShuJuGaiKuang table td { font-size: 13px; color: #fff; position: relative; padding: 0px; margin: 0px; }
            #ShuJuGaiKuang table td .des-title { color: #999; position: absolute; top: 30px; width: 100%; }
            #ShuJuGaiKuang table td .des-number { position: absolute; font-size: 35px; width: 100%; top: 115px;}
            #ShuJuGaiKuang table td .des-sub-title { position: absolute; bottom: 5px; width: 100%; }
    </style>
</head>

<body>
<input type="hidden" id="attackDatajson" value='${attackDatajson}'/> 
<input type="hidden" id="allDaysDetailsjson" value='${allDaysDetailsjson}'/>
<input type="hidden" id="attackVObjectjson" value='${attackVObjectjson}'/>

    <!--头部-->
    <div class="l-box">
        <h1>360星图-安全分析报告 [${fromDate}]</h1>
        <p style="margin-top: 10px">日志分析时间: ${datetime}</p>
    </div>
    <!--内容-->

    <!--第一行-->
    <div id='first-row' class="bulid-row">
        <div class="left-box">
            <!--饼图-->
            <div id='BingTu'></div>
        </div>
        <div class="right-box">
            <!--数据概况-->
            <div id='ShuJuGaiKuang'>
                <table class="pure-table">
                    <tbody>
                        <tr>
                            <td style="width: 20%;">
                                <div class="des-title">总访问量</div>
                                <div class="des-number">${Visits}</div>
                            </td>
                            <td style="width: 20%;">
                                <div class="des-title">漏洞攻击数</div>
                                <div class="des-number">${attackCounts}</div>
                                <!-- <div class="des-sub-title"></div> -->
                            </td>
                            <td style="width:20%">
                                <div class="des-title">CC攻击数</div>
                                <div class="des-number">${ccCounts}</div>
                            </td>
                            <td style="width: 20%;">
                                <div class="des-title">攻击IP</div>
                                <div class="des-number">${uip}</div>
                                <div class="des-sub-title">漏洞攻击${attack_ip}，CC攻击${cc_ip}</div>
                            </td>
                            <td style="width: 20%;">
                                <div class="des-title">攻击种类</div>
                                <div class="des-number">${attackTypeSum}</div>
                            </td>
<!--                             <td style="width: 20%;">
                                <div class="des-title">攻击日期</div>
                                <div class="des-number">${dateSum}</div>
                            </td> -->
                        
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id='second-row' class="bulid-row">
        <div class="left-box">
            <!--雷达图-->
            <div id='LeiDaTu'></div>
        </div>
        <div class="right-box">
            <!--攻击线图-->
            <div id='GongJiXianTu'></div>
        </div>
    </div>
    <!--第三行-->
    <div id='third-row' class="bulid-row" style="padding-bottom:0px">
        <div class="left-box">
            <!--攻击IP分布-->
            <div id='GongJiIP'>
                <table class="pure-table">
                    <thead>
                        <tr>
                            <th style="text-align: left;">攻击IP分布<span class="r" onclick="t(this)">◀</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        #foreach( $entity in $attackCountryRegionList ) 
                        #if($velocityCount<=10)
                        <tr>
                        #else
                        <tr class="hide">
                        #end
                            <td>$entity.name（$entity.countDisplay）</td>
                        </tr>
                        #end
                    </tbody>
                </table>
            </div>
            <!--时间序列-->
            <div id='ShiJianXuLie'>
                <h2>时间序列</h2>
               
                <div id='ShiJianXuLie-list'>
                    <div class="content">
                        <div class="wrapper">
                            <div class="main">
                            
                            	<!-- <div class="year">
                                    <h2><a href="#">2013年<i></i></a></h2>
                                    <div class="list">
                                        <ul>
                                            <li class="cls highlight">
                                                <p class="date">12月</p>
                                                <p class="intro">微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线微俱聚V5.4上线</p>
                                            </li>
                                            <li class="cls">
                                                <p class="date">11月</p>
                                                <p class="intro">微俱聚v5.3上线</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div> -->
                            
                            	<div class="year">
                                    <h2><a href="#">结果概述<i></i></a></h2>
                                    <div class="list">
                                        <ul>
                                            <li class="cls">
                                                <p class="intro">共分析域名数：${evt_hostSum}个</p>
                                                <p class="intro">日志时间周期：${evt_datePeriod} 天</p>
                                                <p class="intro">发现攻击行为总数：${evt_allAttackSum}</p>
                                                <p class="intro">攻击结束时间：${evt_attackEndTime}，共持续 ${evt_attackLongs}</p>
                                                <p class="intro">&nbsp;</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="year">
                                    <h2><a href="#">漏洞攻击<i></i></a></h2>
                                    <div class="list">
                                        #if ($evt_attack)
                                        <ul>
                                            <li class="cls highlight">
                                                <p class="intro">共发现 $evt_attack.sumIP 个IP，发起漏洞攻击  $evt_attack.sumAtt 次</p>
                                                <p class="intro">$evt_attack.firstStartTimeStr，发现第一次web漏洞攻击</p>
                                                <p class="intro">第一次web漏洞攻击IP是:$evt_attack.firstIp，来自$evt_attack.firstRegion</p>
                                                <p class="intro">第一次web漏洞攻击是$evt_attack.firstAttackType</p>
                                                <p class="intro">发起web漏洞攻击最多的IP是:$evt_attack.hotIP，来自$evt_attack.hostRegion</p>
                                                <p class="intro">web漏洞攻击高峰时段出现在：$evt_attack.hotDayHour点，共受到 $evt_attack.hotDayhourCountStr 攻击</p>
                                                <p class="intro">&nbsp;</p>
                                            </li>
                                        </ul>
                                        #end
                                    </div>
                                </div>
                                
                                <div class="year">
                                    <h2><a href="#">CC攻击<i></i></a></h2>
                                    <div class="list">
                                        #if ($evt_cc)
                                        <ul>
                                            <li class="cls highlight">
                                                <p class="intro">共发现 $evt_cc.sumIP 个IP，发起CC攻击 $evt_cc.sumAtt 次</p>
                                                <p class="intro">$evt_cc.firstStartTimeStr，发现第一次CC攻击</p>
                                                <p class="intro">第一次CC攻击的IP是：$evt_cc.firstIp，来自$evt_cc.firstRegion</p>
                                                <p class="intro">第一次被攻击的URL是 $evt_cc.firstUri，共受到 $evt_cc.firstCount 次攻击</p>
                                                <p class="intro">发起CC攻击最多的IP是：$evt_cc.hotIP，来自 $evt_cc.hostRegion</p>
                                                <p class="intro">CC攻击高峰时段出现在：$evt_cc.hotDayHour 点，受 $evt_cc.hotDayhourCountStr 次攻击</p>
                                            </li>
                                        </ul>
                                        #end
                                    </div>
                                </div>
                                 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-box">
            <!--恶意IP-->
            <div id='EYiIP'>
                <h2 id="hosts">恶意IP列表(漏洞攻击)</h2>
                <p></p>
                <table class="pure-table" ">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>攻击次数</th>
                            <th>攻击IP</th>
                            <th>国家/地区</th>
                            <th>攻击次数占比%</th>
                            <th style="width: 40%;"><span class="r" onclick="t(this)">◀</span></th>
                        </tr>
                    </thead>
                    <tbody style="word-break: break-all;">
                        #foreach( $entity in $attackIPRegionList ) 
                        	#if($velocityCount<=10)
                        	<tr>
                            #else
	                        <tr class="hide">
	                        #end
							
                            <td>$velocityCount</td>
                            <td style="text-align: right;">$entity.visitStr</td>
                            <td>$entity.ip</td>
                            #if($entity.country.indexOf("中国") > -1)
							
                            <td style="white-space: nowrap;">$entity.country</td>
                            #else
							
                            <td style="white-space: nowrap;" class="max">$entity.country</td>
                            #end
							
                            <td style="text-align: right;">$entity.visitRate</td>
                            <td class="graph">
                                <div class="bar" style="width: $entity.visitRate"></div>
                            </td>
                        </tr>
                        #end
                    </tbody>
                </table>
             </div>
             
             #if($ccIPRegionList)
             <div id='EYiIP1'>
                <h2 id="hosts">恶意IP列表(CC攻击)</h2>
                <p></p>
                <table class="pure-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>攻击次数</th>
                            <th>攻击IP</th>
                            <th>国家/地区</th>
                            <th>攻击次数占比%</th>
                            <th style="width: 40%;"><span class="r" onclick="t(this)">◀</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        #foreach( $entity in $ccIPRegionList ) 
                        	#if($velocityCount<=10)
                        	<tr>
                            #else
	                        <tr class="hide">
	                        #end
							
                            <td>$velocityCount</td>
                            <td style="text-align: right;">$entity.visitStr</td>
                            <td>$entity.ip</td>
                            #if($entity.country.indexOf("中国") > -1)
							
                            <td style="white-space: nowrap;">$entity.country</td>
                            #else
							
                            <td style="white-space: nowrap;" class="max">$entity.country</td>
                            #end
							
                            <td style="text-align: right;">$entity.visitRate</td>
                            <td class="graph">
                                <div class="bar" style="width: $entity.visitRate"></div>
                            </td>
                        </tr>
                        #end
                    </tbody>
                </table>
            </div>
            #end
            <!--攻击类型-->
            <div id='GongJiLeiXing'>
            </div>

			<div>
			<h2 id="EYiIP2">攻击行为统计</h2>
            <table class="pure-table">
                <tbody>
                	<!-- <thead>
                        <tr>
                            <td style="border-bottom: 1px solid #999;" colspan="4">攻击行为统计</td>
                        </tr>
                    </thead> -->
                   #foreach($key in $attackTypeMap.keySet())
                       #if(($velocityCount+3)%4==0)
                       <tr>
                        <td>$key <a href="#$key" class="hight"> $attackTypeMap.get($key) 条</td>
                       #elseif ($velocityCount%4==0 )
                        <td>$key <a href="#$key" class="hight"> $attackTypeMap.get($key) 条</td>
                       </tr>
                       #else
                       <td>$key <a href="#$key" class="hight"> $attackTypeMap.get($key) 条</td>
                       #end
                   #end
                   
                   #if(($attackTypeMap.size()+3)%4==0)
                   <td>  </td>
                   <td>  </td>
                   <td>  </td>
                   </tr>
                   #elseif (($attackTypeMap.size()+2)%4==0)
                   <td>  </td>
                   <td>  </td>
                   </tr>
                   #elseif (($attackTypeMap.size()+1)%4==0)
                   <td>  </td>
                   </tr>
                   #end
            
                   
                   
                   
                   
                   
                </tbody>
            </table>
            </div>
            <!--高危列表-->
            <div id='GaoWeiLieBiao'>
                <h2 id="requests" style="padding-bottom: 8px;">漏洞攻击列表</h2>
                #foreach( $attackTypeObject in $allAttackTypeList )
                <!-- <p id="${attackTypeObject.typeId}">${attackTypeObject.typeName}</p> -->
                <table id="${attackTypeObject.typeName}" class="pure-table" style="table-layout: fixed ;">
                    <thead>
                    <div style="background: #3D3D3D;border: 1px solid #999;border-bottom: none;height: 32px;line-height: 32px;color: #ffffff;text-indent: 12px">
                        ${attackTypeObject.typeName}Top10(200条)
                    </div>
                    <tr>
                        <th style="width: 5%;">ID</th>
                        <th style="width: 12%;">HOST</th>
                        <th style="width: 12%;">攻击类型</th>
                        <th style="width: 15%;">IP</th>
                        <th style="width: 40%;">URL</th>
                        <th style="width: 5%;">次数</th>
                        <th style="width: 13%;">时间<span class="r" onclick="t(this)">◀</span></th>
                    </tr>
                    </thead>
                    <tbody style="word-break: break-all;">
                    #foreach( $entity in $attackTypeObject.typeList )
	                    #if($velocityCount <= 10)
	                    <tr>
	                        <td>$velocityCount</td>
	                        <td>$entity.host</td>
	                        <td>$entity.rule</td>
	                        <td>$entity.ip</td>
	                        <td>$entity.url</td>
	                        <td style="text-align:right;">$entity.count</td>
	                        <td>$entity.starttime</td>
	                    </tr>
	                    #elseif($velocityCount <= 200 && $velocityCount>10)
	                    <tr class="hide">
	                        <td>$velocityCount</td>
	                        <td>$entity.host</td>
	                        <td>$entity.rule</td>
	                        <td>$entity.ip</td>
	                        <td>$entity.url</td>
	                        <td style="text-align:right;">$entity.count</td>
	                        <td>$entity.starttime</td>
	                    </tr>
	                    #end
                    #end
                    </tbody>
                </table>
				#end
				
				#if($ccList)
                <h2 id="requests" style="padding-top: 25px;padding-bottom: 8px;">CC攻击列表(200条)</h2>
                <table class="pure-table" style="table-layout: fixed">
                    <thead>
                    <tr>
                        <th style="width: 5%">ID</th>
                        <th style="width: 12%;">HOST</th>
                        <th style="width: 15%;">IP</th>
                        <th style="width: 50%;">URI</th>
                        <th style="width: 5%;">次数</th>
                        <th style="width: 13%;">时间<span class="r" onclick="t(this)">◀</span></th>
                    </tr>
                    </thead>
                    <tbody>
                    #foreach( $entity in $ccList )
	                    #if($velocityCount <= 200 && $velocityCount>10)
		                    <tr>
		                    	<td>$velocityCount</td>
		                        <td>$entity.host</td>
		                        <td>$entity.ip</td>
		                        <td>$entity.url</td>
		                        <td style="text-align:right;">$entity.count</td>
		                        <td>$entity.starttime</td>
		                    </tr>
	                    #elseif(10< $velocityCount <= 200)
		                    <tr class="hide">
		                        <td>$velocityCount</td>
		                        <td>$entity.host</td>
		                        <td>$entity.ip</td>
		                        <td>$entity.url</td>
		                        <td style="text-align:right;">$entity.count</td>
		                        <td>$entity.starttime</td>
		                    </tr>
		                #end
                    #end
                    </tbody>
                </table>
                #end
            </div>
        </div>
    </div>
    <!--底部-->
    <div id='footer'></div>
    <!--Jquery CDN-->
     <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> -->
     <script src="./js/jquery.min.js"></script>
    <!--点击展开事件-->
    <script>
        function t(c) {
            for (var b = c.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('tr'), a = 0; a < b.length; a++) 'hide' == b[a].className ? (b[a].className = 'show', c.innerHTML = '▼') : 'show' == b[a].className && (b[a].className = 'hide', c.innerHTML = '◀')
        }; function a(c) {
            var b = c.parentNode.parentNode.nextSibling; while (b && b.nodeType != 1) b = b.nextSibling; 'agent-hide' == b.className ? (b.className = 'a-show', c.innerHTML = '▼') : 'a-show' == b.className && (b.className = 'agent-hide', c.innerHTML = '▶')
        };
		</script>
    <!--时间序列-->
    <script>
        $(".main .year .list").each(function (e, target) {
            var $target = $(target),
                $ul = $target.find("ul");
            $target.height($ul.outerHeight()), $ul.css("position", "absolute");
        });
        $(".main .year>h2>a").click(function (e) {
            e.preventDefault();
            $(this).parents(".year").toggleClass("close");
        });
		</script>

    <!-- <script type="text/javascript" src="http://echarts.baidu.com/doc/example/www2/js/echarts-all.js"></script> -->
    <script type="text/javascript" src="./js/plug-in.js"></script>
    <script type="text/javascript">
        var theme = {
            // 全图默认背景
            backgroundColor: '#2f2f2f',

            // 默认色板
            color: [
                '#46BFBD', '#9BCA63', '#FDB45C', '#F7464A', '#FAD860', '#60C0DD', '#0084C6',
                '#D7504B', '#C6E579', '#26C0C0', '#F0805A', '#F4E001', '#B5C334'
            ],

            // 图表标题
            title: {
                itemGap: 8,
                textStyle: {
                    fontSize: 14,
                    fontWeight: 'normal',
                    color: '#999',          // 主标题文字颜色
                    fontFamily: '微软雅黑,Microsoft Yahei,tahoma,arial'
                }
            },

            // 图例
            legend: {
                itemGap: 8,
                textStyle: {
                    color: '#ccc'          // 图例文字颜色
                }
            },

            // 值域
            dataRange: {
                itemWidth: 15,
                color: ['#FFF808', '#21BCF9'],
                textStyle: {
                    color: '#ccc'          // 值域文字颜色
                }
            },

            toolbox: {
                color: ['#fff', '#fff', '#fff', '#fff'],
                effectiveColor: '#FE8463',
                disableColor: '#666',
                itemGap: 8
            },

            // 提示框
            tooltip: {
                backgroundColor: 'rgba(250,250,250,0.8)',     // 提示背景颜色，默认为透明度为0.7的黑色
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
                    lineStyle: {          // 直线指示器样式设置
                        color: '#aaa'
                    },
                    crossStyle: {
                        color: '#aaa'
                    },
                    shadowStyle: {                     // 阴影指示器样式设置
                        color: 'rgba(200,200,200,0.2)'
                    }
                },
                textStyle: {
                    color: '#333'
                }
            },

            // 区域缩放控制器
            dataZoom: {
                dataBackgroundColor: '#555',            // 数据背景颜色
                fillerColor: 'rgba(200,200,200,0.2)',   // 填充颜色
                handleColor: '#eee'     // 手柄颜色
            },

            // 网格
            grid: {
                borderWidth: 0
            },

            // 类目轴
            categoryAxis: {
                axisLine: {            // 坐标轴线
                    show: false
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#ccc'
                    }
                },
                splitLine: {           // 分隔线
                    show: false
                }
            },

            // 数值型坐标轴默认参数
            valueAxis: {
                axisLine: {            // 坐标轴线
                    show: false
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#ccc'
                    }
                },
                splitLine: {           // 分隔线
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['#aaa'],
                        type: 'dashed'
                    }
                },
                splitArea: {           // 分隔区域
                    show: false
                }
            },

            polar: {
                name: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#ccc'
                    }
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#ddd'
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.2)', 'rgba(200,200,200,0.2)']
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#ddd'
                    }
                }
            },

            timeline: {
                label: {
                    textStyle: {
                        color: '#ccc'
                    }
                },
                lineStyle: {
                    color: '#aaa'
                },
                controlStyle: {
                    normal: { color: '#fff' },
                    emphasis: { color: '#FE8463' }
                },
                symbolSize: 3
            },

            // 折线图默认参数
            line: {
                smooth: true
            },

            // K线图默认参数
            k: {
                itemStyle: {
                    normal: {
                        color: '#FE8463',       // 阳线填充颜色
                        color0: '#9BCA63',      // 阴线填充颜色
                        lineStyle: {
                            width: 1,
                            color: '#FE8463',   // 阳线边框颜色
                            color0: '#9BCA63'   // 阴线边框颜色
                        }
                    }
                }
            },

            // 雷达图默认参数
            radar: {
                symbol: 'emptyCircle',    // 图形类型
                symbolSize: 3
                //symbol: null,         // 拐点图形类型
                //symbolRotate : null,  // 图形旋转控制
            },

            pie: {
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: 'rgba(255, 255, 255, 0.5)'
                    },
                    emphasis: {
                        borderWidth: 1,
                        borderColor: 'rgba(255, 255, 255, 1)'
                    }
                }
            },

            map: {
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(255, 255, 255, 0.5)',
                        areaStyle: {
                            color: '#ddd'
                        },
                        label: {
                            textStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    emphasis: {                 // 也是选中样式
                        areaStyle: {
                            color: '#FE8463'
                        },
                        label: {
                            textStyle: {
                                color: 'ccc'
                            }
                        }
                    }
                }
            },

            force: {
                itemStyle: {
                    normal: {
                        linkStyle: {
                            strokeColor: '#fff'
                        }
                    }
                }
            },

            chord: {
                padding: 4,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 1,
                            color: 'rgba(228, 228, 228, 0.2)'
                        },
                        chordStyle: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(228, 228, 228, 0.2)'
                            }
                        }
                    },
                    emphasis: {
                        lineStyle: {
                            width: 1,
                            color: 'rgba(228, 228, 228, 0.9)'
                        },
                        chordStyle: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(228, 228, 228, 0.9)'
                            }
                        }
                    }
                }
            },

            gauge: {
                startAngle: 225,
                endAngle: -45,
                axisLine: {            // 坐标轴线
                    show: true,        // 默认显示，属性show控制显示与否
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, '#9BCA63'], [0.8, '#60C0DD'], [1, '#D7504B']],
                        width: 3,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                        fontWeight: 'bolder',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length: 25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    offsetCenter: [0, '50%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
            },

            funnel: {
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(255, 255, 255, 0.5)',
                        borderWidth: 1
                    },
                    emphasis: {
                        borderColor: 'rgba(255, 255, 255, 1)',
                        borderWidth: 1
                    }
                }
            },

            textStyle: {
                fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
            }
        }

        window.onload = function () {
            var myChart = echarts.init(document.getElementById('BingTu'), theme);
            //ECharts图表的click事件监听
            myChart.on("click", function (param) {
                alert(param.name + ":" + param.value);
            });

            var attackDatajson = document.getElementById('attackDatajson').value;
            var myObject = eval("(" + attackDatajson + ")");

            myChart.setOption({
                title: {
                    text: '漏洞攻击类型分布',
                    //subtext: '统计日期：2014-11-24',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                /*         	    legend: {
                                    orient : 'vertical',
                                    x : 'left',
                                    data:['struts2远程执行','SQL注入','XSS','SQL盲注','恶意扫描']
                                    //data:${attack_type_array}
                                }, */
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: false,
                series: [
                    {
                        name: '攻击类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        /* data: [
                            { value: 335, name: 'struts2远程执行' },
                            { value: 310, name: 'SQL注入' },
                            { value: 234, name: 'XSS' },
                            { value: 135, name: 'SQL盲注' },
                            { value: 1548, name: '恶意扫描' }
                        ] */
                        data:myObject.typeList
                    }
                ]
            });


            var myChart2 = echarts.init(document.getElementById('GongJiXianTu'), theme);
            $(window).resize(function () {
                myChart2.resize();
            });
            //ECharts图表的click事件监听
            myChart2.on("click", function (param) {
                alert(param.name + ":" + param.value);
            });

            var allDaysDetailsjson = document.getElementById('allDaysDetailsjson').value;
            var myObject2 = eval("(" + allDaysDetailsjson + ")");

            myChart2.setOption({
                title: {
                    text: '攻击曲线图',
                    //subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['漏洞攻击', 'CC攻击']
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: false,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        //data: ['2012-11-12', '2012-11-13']
                        data : myObject2.attackDeatilKey
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '漏洞攻击',
                        type: 'line',
                        smooth: true,
                        itemStyle: { normal: { areaStyle: { type: 'default' } } },
                        //data: [0, 200]
                        data:myObject2.attackAttackDeatilVal
                    },
                    {
                        name: 'CC攻击',
                        type: 'line',
                        smooth: true,
                        itemStyle: { normal: { areaStyle: { type: 'default' } } },
                        //data: [100, 0]
                        data:myObject2.attackCCDeatilVal
                    }
                ]
            });



            var myChart3 = echarts.init(document.getElementById('LeiDaTu'), theme);
            //ECharts图表的click事件监听
            myChart3.on("click", function (param) {
                alert(param.name + ":" + param.value);
            });

            var attackVObjectjson = document.getElementById('attackVObjectjson').value;
            var myObject3 = eval("(" + attackVObjectjson + ")");
            myChart3.setOption({
            	title : {
                    text: '攻击目标'
                },
               tooltip : {
                    trigger: 'axis'
                },
                /*legend: {
                    orient : 'vertical',
                    x : 'right',
                    y : 'bottom',
                    data:['安全状况']
                },*/
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : false,
                polar : [
                    {
                        /*  indicator : [
                            {text : '数据攻击', max  : 100},
                            {text : '服务器攻击', max  : 100},
                            {text : '应用攻击', max  : 100},
                            {text : '文件攻击', max  : 100},
                            {text : '其他攻击', max  : 100}
                        ] */
                        indicator:myObject3.attackVKeyList
                    }
                ],
                series : [
                    {
                        name: '攻击数据',
                        type: 'radar',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data : [
                            {
                                //value : [97, 42, 88, 94, 90]
                                value:myObject3.attackVValList,name : '攻击目标'
                            }
                        ]
                    }
                ]
            });

        }
		</script>
</body>

</html>
